{% extends "base.html" %}

{% block head %}
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ google_maps_api_key }}" type="text/javascript"></script>
<script type="text/javascript">

  //<![CDATA[

function createMarker(point,html,last) {
  var blueIcon = new GIcon();
  blueIcon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
  blueIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
  blueIcon.iconSize = new GSize(12, 20);
  blueIcon.shadowSize = new GSize(22, 20);
  blueIcon.iconAnchor = new GPoint(6, 20);
  blueIcon.infoWindowAnchor = new GPoint(5, 1);

  var redIcon = new GIcon();
  redIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
  redIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
  redIcon.iconSize = new GSize(12, 20);
  redIcon.shadowSize = new GSize(22, 20);
  redIcon.iconAnchor = new GPoint(6, 20);
  redIcon.infoWindowAnchor = new GPoint(5, 1);

  var pre = ""; // text to go before the usual bubble stuff
  if(last == 1) { // if it's the last, I want a different icon to differentiate
    marker_options = { icon:blueIcon }
    pre = '<b>Newest position</b><br/>';
  }
  else {
    marker_options = { icon:redIcon }
  }

  var marker = new GMarker(point, marker_options);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(pre + html);
  });
  return marker;
}

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.removeMapType(G_NORMAL_MAP);
    map.removeMapType(G_SATELLITE_MAP);
    var mapControl = new GMapTypeControl();
    map.addControl(mapControl);
    map.addControl(new GSmallMapControl());
    map.setCenter(new GLatLng(0,0), 0);

    var bounds = new GLatLngBounds();

{% if positions %}{% for report in positions %}
    var point{{ forloop.counter }} = new GLatLng({{ report.latitude }}, {{ report.longitude }});
    map.addOverlay(createMarker(point{{ forloop.counter }}, "{% autoescape off %}{{ report.get_bubble_text }}{% endautoescape %}", {% if forloop.last %}1{% else %}0{% endif %}));
    bounds.extend(point{{ forloop.counter }})
{% endfor %}{% endif %}

{% if positions %}{% for report in positions %}
    {% if forloop.first %}{% else %}
    var line{{ forloop.counter|add:"-1" }} = new GPolyline([
      point{{ forloop.counter|add:"-1" }},
      point{{ forloop.counter }}
    ], "#ff0000", 4);
    map.addOverlay(line{{ forloop.counter|add:"-1" }})
    {% endif %}
{% endfor %}{% endif %}

    map.setZoom(map.getBoundsZoomLevel(bounds))
    map.setCenter(bounds.getCenter())
  }
}

  //]]>
</script>
{% endblock %}

{% block body %} onload="load()" onunload="GUnload()"{% endblock %}

{% block content %}
<p><strong>Info:</strong><br/>
{{ map_info }}<br/></p>
<div id="map" style="width: 690px; height: 480px"></div>
{% endblock %}
